<template>
  <div
    class="editable-mask"
    :style="{
      left: positionX + 'px',
      top: positionY + 'px',
      width: positionWidth + 'px',
      height: positionHeight + 'px',
    }"
    @pointerdown="onDivPointerDown"
    @pointermove="onDivPointerMove"
    @pointerup="onDivPointerUp"
  ></div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import { useDrag } from './composables/useDrag';
defineOptions({
  name: 'DivEditMask',
});

const sceneStore = useSceneStore();
const positionX = ref<number>(0);
const positionY = ref<number>(0);
const positionWidth = ref<number>(0);
const positionHeight = ref<number>(0);
const { onDivPointerDown, onDivPointerMove, onDivPointerUp } = useDrag();

onMounted(() => {
  calcPosition();
});

function calcPosition() {
  if (!sceneStore.selLayer) return;
  const targetDom = document.querySelectorAll(
    `.gis-container-web-div.${sceneStore.selLayer.layerName} .editable`
  );
  if (!targetDom.length) return;
  const targetDomPosition = targetDom[0].getBoundingClientRect();
  positionX.value = targetDomPosition.left;
  positionY.value = targetDomPosition.top;
  positionWidth.value = targetDomPosition.width;
  positionHeight.value = targetDomPosition.height;
}

watch(
  () => [sceneStore.selLayer, sceneStore.mapCameraHeight],
  () => {
    nextTick(() => {
      calcPosition();
    });
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.editable-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 2px solid #ffc000;
}
</style>
